<template>
	<div class="u-general-color">
		<div>
			<section>
				<div>
					<div id="imgbox">
						<div>
							<u-swiper :list="goods.goodsImages.split(',')" height="375" border-radius="0" @click="showOriginalImage"></u-swiper>
						</div>
					</div>

					<div class="u-pl-10 u-pr-10 red-area">
						<div>
							<div>
								<u-tag
									:text="'本期已售'+(totalGoodsSalesVolume?totalGoodsSalesVolume:0)+'件 百人团最高奖励¥'+goods.hundredProfit"
									type="info" mode="dark" size="mini" bgColor="#ffffff" borderColor="#ffffff" color="#000000"
									v-if="totalGoodsSalesVolume < 1000"></u-tag>
								<u-tag
									:text="'本期已售'+(totalGoodsSalesVolume?totalGoodsSalesVolume:0)+'件 千人团最高奖励¥'+goods.thousandProfit"
									type="info" mode="dark" size="mini" bgColor="#ffffff" borderColor="#ffffff" color="#000000"
									v-if="totalGoodsSalesVolume > 1000 && totalGoodsSalesVolume < 10000"></u-tag>
								<u-tag
									:text="'本期已售'+(totalGoodsSalesVolume?totalGoodsSalesVolume:0)+'件 万人团最高奖励¥'+goods.tenThousandProfit"
									type="info" mode="dark" size="mini" bgColor="#ffffff" borderColor="#ffffff" color="#000000"
									v-if="totalGoodsSalesVolume > 10000"></u-tag>
							</div>
							<div class="tips">
								<span>本轮团购结束后，发放</span>
								<span v-if="totalGoodsSalesVolume < 1000">百人团</span>
								<span v-if="totalGoodsSalesVolume > 1000 && totalGoodsSalesVolume < 10000">千人团</span>
								<span v-if="totalGoodsSalesVolume > 10000">万人团</span>
								<span>奖励！</span>
							</div>
						</div>
						<div style="display: flex;flex-direction: column;text-align: right;">
							<div class="price">{{endTimeContent}}</div>
							<div style="color: #ffffff;"
								v-if="endTimeContent != '活动已结束' && endTimeContent.indexOf('天后结束') == -1">距离活动结束仅剩</div>
						</div>
					</div>

					<div class="n-price">
						<div class="n-price__left price-area">
							<div class="u-fz-26 u-font-bold discount-price">
								&yen;{{goods.discountPrice?goods.discountPrice:''}}</div>
							<div class="u-pl-5 discount-tag">
								<u-tag text="玫丽专享价" mode="dark" size="mini" bgColor="#fc545d" borderColor="#fc545d"></u-tag>
							</div>
							<span class="line-through u-pl-10">&yen;{{goods.goodsPrice?goods.goodsPrice:'0'}}</span>
						</div>
					</div>

					<div class="u-title u-fz-18 u-pb-10 commodity-name">
						<h4 class="tit f-els-2">
							<span class="goods-title-tag u-pr-5" :style="'background-color: '+goods.attributeColor+';'"
								v-if="goods.productAttribute">{{goods.productAttribute}}</span>
							<span class="middile">{{goods.goodsName?goods.goodsName:''}}</span>
						</h4>
						<div class="font-thin u-flex u-pt-5" v-if="goods.goodsTag && goods.goodsTag.split(',').length>0">
                            <div class="u-pr-5" v-for="(item, index) in goods.goodsTag.split(',')" :key="index">
                                <u-tag :text="item" type="info" mode="dark" size="mini" bgColor="#f7f5f8" borderColor="#f7f5f8" color="#828282"></u-tag>
                            </div>
						</div>
					</div>

				</div>
			</section>

			<p class="v-sperate"></p>
			<section class="j-block">
				<div class="deliver-goods1" @click="showPeculiarity" v-if="goods.peculiarity">
					<div class="peculiarity-icon">
						品质认证
					</div>
					<div class="color-gray u-flex">
						<div class="u-pr-5 peculiarity-text">
							{{goods.peculiarity}}
						</div>
						<u-icon name="arrow-right" color="#9f9d9e" size="13"></u-icon>
					</div>
				</div>
				<p class="v-sperate" v-if="goods.peculiarity"></p>
				<div class="deliver-goods" @click="viewFreight">
					<div class="left">
						<span class="color-gray">
							发货
						</span>
						<span class="u-pl-10" v-if="goods.originAddr">
							{{goods.originAddr.replaceAll('-',' ')?goods.originAddr.replaceAll('-',' '):''}} | 包邮
						</span>
						<span v-else>
							包邮
						</span>
					</div>

					<div class="color-gray u-flex">
						<span class="u-pr-5">
							偏远地区运费
						</span>
						<u-icon name="arrow-right" color="#9f9d9e" size="13"></u-icon>
					</div>
				</div>
				<div class="specs-goods" v-if="goods.specification">
					<div class="left">
						<span class="color-gray">
							规格
						</span>
					</div>
					<div class="right">
						<span>
							{{goods.specification?goods.specification:''}}
						</span>
					</div>
				</div>
			</section>

			<p class="v-sperate"></p>
			<section class="j-block width93">
				<div id="qualityreport"></div>
				<div style="margin: 10rpx 0rpx;">
					<span class="goods-details-title">商品详情</span>
				</div>
				<div class="u-mb-10">
					<u-parse :content="this.escape2Html(goods.detail)"></u-parse>
				</div>
				<div class="modal-item" @click="viewNotice">
					<div>
						购买须知
					</div>
					<div style="font-size: smaller;">
						<u-icon name="arrow-right" color="#9f9d9e" size="13"></u-icon>
					</div>
				</div>
				<div class="modal-item" @click="salesService">
					<div>
						售货服务
					</div>
					<div style="font-size: smaller;">
						<u-icon name="arrow-right" color="#9f9d9e" size="13"></u-icon>
					</div>
				</div>
			</section>
		</div>

		<p class="v-sperate" v-if="goodSalesList && goodSalesList.length>0"></p>
		<section class="j-block" v-if="goodSalesList && goodSalesList.length>0">
			<div id="qualityreport">
			</div>
			<div>
				<u-divider height="100" fontSize="34" color="#000000" margin-top="20" margin-bottom="20"
					bg-color="#fffbfe">相似商品</u-divider>
			</div>
			<div style="margin: 0rpx 20rpx 20rpx 20rpx;">
				<div class="aui-list-box u-pl-5 u-pr-5" v-if="goodSalesList && goodSalesList.length>0">
					<a href="javascript:;" class="aui-list-item" v-for="(item,index) in goodSalesList" :key="index"
						@click="toGoodsDetails(item)">
						<div class="aui-list-theme-img">
							<u-image width="100%" height="343rpx" :src="item.goodsImages.split(',')[0]"></u-image>
						</div>
						<div class="aui-list-theme-message">
							<h3 class="aui-list-theme-title line-ellipsis">{{item.goodsName}}</h3>
							<div class="u-fz-11" style="color: #cdb88b;font-weight: 300;">每件商品的销售报酬</div>
							<div class="u-flex u-pb-5" style="justify-content: space-between;">
								<span style="color: #ea4d5e;font-weight: bold;">
									￥<span class="u-fz-18">{{item.workerReward}}</span>
								</span>
								<span style="color: #b7b7b7;font-size: 24rpx;">
									已售{{item.buyTotalNum<1000?item.buyTotalNum:'999+'}}
								</span>
							</div>
						</div>
					</a>
				</div>
				<div class="u-text-center" style="padding-top: 20%;" v-else>
					<u-empty text="暂无商品" mode="data"></u-empty>
				</div>
			</div>
		</section>

		<div style="height: 220rpx;"></div>

		<article class="m-buybar">
			<div class="btn-wrap">
				<button class="customStyle-btn" @click="CheckData">
					<u-icon name="kefu-ermai" color="#000000" size="25"></u-icon>
					<span class="customStyle-btn-span">客服</span>
				</button>
				<button class="customStyle-btn" @click="CheckData">
					<u-icon name="share-square" color="#000000" size="25"></u-icon>
					<span class="customStyle-btn-span">分享</span>
				</button>
                <div class="btn-wrap" v-if="goods.status !== '已下架'">
                    <div class="have-a-try" @click="CheckData">
                        <div class="u-fz-15">
                         品牌合作
                        </div>
                    </div>
                    <div class="share-link u-ml-5" @click="CheckData">
                        <div class="u-fz-15">立即购买</div>
                    </div>
                </div>
                <div v-else>
                    <div class="shel-a-try">
                        <div class="u-fz-15">
                            活动商品已下架
                        </div>
                    </div>
                </div>
			</div>
		</article>
        <InvitationCode ref="invitationCodeRef" @childEvent="handleChildEvent" />
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				title: '活动商品详情',
				goods: {}, // 商品信息
				customerService_show: false,
				customerService: {},
				solitaireList: [], // 存在的相似的拼团列表
				fileList: [],
				goodSalesList: [],
				similarGroup_show: false,
				groupList_show: false,
				jobNotice_show: false, // 玫丽销售工作须知
				freight_show: false, // 偏远地区运费
				buyNotice_show: false, // 购买须知
				afterSales_show: false, // 玫丽售后服务
				totalGoodsSalesVolume: '0', // 当前周期商品累积总销售量
				endTimeContent: '', // 倒计时
				hundredRebateRatio: '', // 百人团返利占比
				thousandRebateRatio: '', // 千人团返利占比
				tenThousandRebateRatio: '', // 万人团返利占比
				background: {
					backgroundColor: '#f3e4e9',
				},
				recoveryStyle: {
					fontSize: '24rpx',
					width: '150rpx',
					padding: '0',
					color: '#000000'
				},
				buynowStyle: {
					backgroundColor: '#e55e97',
					color: '#ffffff',
					width: '365rpx',
					border: '0'
				},
				try_show: false, // 底部按钮“试一试”弹窗
				OneClickSales0_show: false,
				isProvider: false, // 是否已成为区域服务商
				Provider: {},
				agencySalesGoods_show: false, //代理销售商品弹窗
				buy_show: false, // “立即购买”按钮弹窗
				share_show: false, // “立即分享”按钮弹窗
				buyNowPrice: 0, //立即购买显示金额
				buyNowPricePrefix: 0, //立即购买显示金额前半部分
				buyNowPriceSuffix: 0, //立即购买显示金额后半部分
				peculiarity_show: false //卖点弹窗
			}
		},

		onLoad(options) {

			// 商品编号
			if (this.isNotNull(options.goodsNo) || this.isNotNull(options.goodsId)) {
				this.getCommodityDetails(options.goodsNo, options.goodsId);
				this.getEvaluation(options.goodsNo);
				this.getGoodSalesList(options.goodsNo);
			}
		},

		onShow() {
			// 每次进入页面都需要判断是否已成为区域服务商
			this.getProvider();
		},

		methods: {

			/**
			 * 判断当前用户是否已成为区域服务商
			 */
			async getProvider() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/provider/info",
					userId: uni.getStorageSync('userInfo').userId,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.isNotNull(result.data)) { //已经注册区域服务商
						this.Provider = result.data
						this.isProvider = true
					}
				} else {
					this.showMSG('error', '出错啦！');
				}
			},

			/**
			 * 获取商品详情
			 */
			async getCommodityDetails(goodsNo, goodsId) {

				let meilyUrl = "";
				
				if(this.isNotNull(goodsNo) && this.isNotNull(goodsId)){
					meilyUrl = "/goods/get/" + goodsNo + "/" + goodsId;
				} else if(this.isNotNull(goodsNo)){
					meilyUrl = "/goods/get/" + goodsNo;
				}else if (this.isNotNull(goodsId)) {
					meilyUrl = "/goods/" + goodsId;
				}

				let result = await this.$u.api.unifyMiniRestGet({
                    params: {systemid: "meily"},
					url: meilyUrl,
				});
				if (result.code == 200) {

					// 商品信息
					this.goods = result.data;
					this.getCycle(this.goods.goodsId); // 获取周期串

					let today = this._getTimes(); // 获取当前日期

					if (this.isNotNull(this.goods.releaseTime)) {
						let diff = this.comparisonDate(today, this.goods.releaseTime);

						// 上架时间距离今天的天数 / 帮卖周期 向上取整，便获取到需要增加的周期倍数
						let multiple = Math.ceil(parseFloat(diff) / parseFloat(this.goods.helpCycle));

						// 结束时间 = 上架时间 + (帮卖周期 * 需要增加的周期倍数)；
						let endTime = this.addDateTime(this.goods.releaseTime, parseInt(this.goods.helpCycle) *
							parseInt(multiple));
                        if (this.goods.status === '已下架') {
                         this.endTimeContent = '活动已结束';
                        } else {
                        // 倒计时
                        this.countdowm(endTime, '活动已结束');
                        }
					} else {
						this.showMSG('error', '获取不到上架时间');
					}

					this.getGoodsSales(goodsNo, goodsId)
				}
			},

			/**
			 * 根据商品记录唯一ID获取周期串
			 */
			async getCycle(goodsId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/goods/cycle/" + goodsId,
				});
				if (result.code == 200) {
					this.goods.cycle = result.data; // 周期串
				}
			},

			/**
			 * 获取客服详情
			 */
			async getCSInfo(csId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/clientele/get/" + csId,
				});
				if (result.code == 200) {
					this.customerService = result.data;
				}
			},

			/**
			 * 获取商品销售量（传了cycle才是获取当前周期的）
			 */
			async getGoodsSales(goodsNo, goodsId) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/record/totalSales",
					goodsNo: goodsNo,
					goodsId: goodsId,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.totalGoodsSalesVolume = result.data;
					//立即购买显示的金额
					let preferential_price = 0
					if (this.totalGoodsSalesVolume > 10000) {
						preferential_price = this.goods.tenThousandProfit
					} else if (this.totalGoodsSalesVolume > 1000) {
						preferential_price = this.goods.thousandProfit
					} else if (this.totalGoodsSalesVolume > 100) {
						preferential_price = this.goods.hundredProfit
					}
					this.buyNowPrice = (parseFloat(this.goods.foremanReward ? this.goods.foremanReward : 0) +
						parseFloat(this.goods.consumerShareReward ? this.goods.consumerShareReward : 0) +
						parseFloat(preferential_price ? preferential_price : 0)).toFixed(2)
					this.buyNowPricePrefix = this.buyNowPrice.split(".")[0]
					this.buyNowPriceSuffix = this.buyNowPrice.split(".")[1]
				} else {
					this.$u.toast(result.msg);
				}
			},

			/**
			 * 获取测评成果（BPM）
			 */
			async getEvaluation(goodsNo) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/minrest",
					appid: 'meily',
					wf_num: 'R_meily_BL009',
					goodsNo: goodsNo,
					quantity: '3',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) { // 可以报名
					this.fileList = result.data;
				}
			},

			/**
			 * 获取相似商品
			 */
			async getGoodSalesList(goodsNo) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/goods/similar/list",
					category: this.goods.category,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) { // 可以报名
					this.goodSalesList = result.data;
				}
			},

			/**
			 * 将换行符转成<br>
			 * @param {Object} str
			 */
			escapeBR(str) {
				return str.replace(/\n/g, "<br>");
			},
			
			/**
			 * 点击查看原图
			 */
			showOriginalImage(index) {
				let graphicUrlList = this.goods.goodsImages.split(',')
				wx.previewImage({
					current: graphicUrlList[index],
					urls: graphicUrlList,
				});
			},

            /**
            * 判断用户是否已登录，如果登录则跳转到指定页面，否则弹出提示并跳转到登录页面
            */
            CheckData() {
				const userInfo = uni.getStorageSync('userInfo')
				if (!this.isNotNull(userInfo.userId)) {
					this.showMSG('none', '请先登录！')
					setTimeout(() => {
						this.checkLogin()
					}, 1500)
				}else{
					//通过$refs获取子组件的引用，然后调用子组件的方法
					this.$refs.invitationCodeRef.isExistInvitationCode();
				}
			},

			/**
			 * 验证完邀请码后回调方法
			 */
			handleChildEvent() {
                let url = '/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + this.goods.goodsNo + '&goodsId=' + this.goods.goodsId
				this.toMiniProgram(url)
			},

		}
	}
</script>

<style scoped>
	.n-price {
		height: 100rpx;
		width: 93%;
		margin: 0 auto;
		color: #000000;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.n-price__left {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
        align-items: center;
		line-height: 110rpx;
	}

	.n-price .curprice {
		font-size: 15px;
		color: #e31436;
	}

	.n-price .curprice .curnum {
		font-size: 44rpx;
		font-weight: bold;
	}

	.n-price .mrkprice {
		text-decoration: line-through;
		margin-left: 5rpx;
		font-size: 30rpx;
		color: #999;
	}

	.n-price .tag {
		display: inline-block;
		padding: 0 5px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		margin-left: 10px;
		vertical-align: 2px;
		font-size: 11px;
		color: #fff;
		background: #ff8587;
		border-radius: 3px;
	}

	.n-prdinfo {
		margin: 0 10px 10px;
		border-top: 1px solid #f0f0f0;
	}

	.n-prdinfo .tit {
		line-height: 32rpx;
		/* padding-top: 10px; */
		margin-bottom: 12rpx;
		width: 100%;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.n-prdinfo .subtit {
		font-size: 13px;
		color: #333;
		line-height: 21px;
	}

	.n-prdinfo .subtit .spec {
		color: #e31436;
	}

	.n-prdinfo .presaletxt {
		color: #f00;
	}

	.u-graybar {
		background: #f1f1f1;
		height: 10px;
	}

	.n-activitybox {
		background-color: #FFFFFF;
		width: 90%;
		margin: 0 auto;
	}

	.n-activitybox .itm {
		position: relative;
		padding: 9px 0;
		/* border-bottom: 1px solid #f0f0f0; */
		zoom: 1;
	}

	.n-activitybox .itm:after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		content: ".";
	}

	.n-activitybox .itm .name {
		float: left;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
		color: #6f6e6e;
	}

	.n-activitybox .itm .cnt {
		margin-left: 50px;
		padding-top: 1px;
		padding-right: 10px;
	}

	.n-activitybox .itm:last-child {
		border-bottom: none;
	}

	.n-activitybox .v-linkicon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0px;
		width: 10px;
		height: 10px;
		margin-top: auto;
		margin-bottom: auto;
		background-size: 200px;
	}


	.mrkprice {
		padding-left: 8rpx;
	}

	.v-sperate {
		height: 10rpx;
		background: #f7f1f7;
	}

	.n-goodsdetailbar {
		position: relative;
		height: 44px;
	}

	.n-goodsdetailbar .txt {
		position: absolute;
		top: 0;
		left: 0px;
		z-index: 9;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.n-goodsdetailbar .v-img {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 90rpx;
	}

	img {
		vertical-align: middle;
		border: 0;
	}

	.m-buybar {
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		width: 100%;
		/* height: 200rpx; */
		background: #fff;
		padding-top: 15rpx;
		padding-bottom: 50rpx;
	}

	.m-buybar .btn-wrap {
		width: 95%;
		margin: 0 auto;
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.m-buybar a {
		display: block;
		height: 50px;
		vertical-align: top;
		font-size: 15px;
		line-height: 50px;
		text-align: center;
	}

	.m-buybar .btn {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.m-buybar .buynow {
		color: #fff;
		/* background: #e31436; */
		background: #e55e97;
	}

	.m-buybar .buynow.btn-large {
		border: none;
		background-color: #d22147;
		color: #fff;
	}

	.m-buybar .buynow.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .buynow.s-fc {
		background: #000;
	}

	.m-buybar .addcart {
		background-color: #ff8587;
		color: #fff;
	}

	.m-buybar .addcart.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .collect {
		position: relative;
		/* width: 95px; */
		width: 140rpx;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		/* border-right: 1px solid #ddd; */
		color: #666;
		font-size: 24rpx;
	}

	.m-buybar .collect:after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 7px;
		left: 17px;
		background-size: 200px;
	}

	.m-buybar .collect-1 {
		background-position: -161px 1px;
	}

	.m-buybar .collect-1:after {
		background-position: -139px -33px;
	}

	.m-buybar .cart {
		position: relative;
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
		background-size: 200px;
	}

	.m-buybar .cart .count {
		position: absolute;
		min-width: 16px;
		height: 16px;
		left: 27px;
		top: 2px;
		background-color: #fff;
		color: #e31436;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		padding: 0 4px;
		border: 1px solid #e31436;
	}

	.m-buybar .nogoods {
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		padding-left: 10px;
		background-color: rgba(0, 0, 0, 0.7);
		text-align: left;
		font-size: 16px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .nogoods:after {
		content: "";
		position: absolute;
		width: 70px;
		height: 45px;
		left: 10px;
		top: -35px;
		background-size: 200px;
	}

	.m-buybar .cantdeliver {
		position: absolute;
		text-align: center;
		top: -40px;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		font-size: 12px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .hide {
		display: none;
	}

	.bg-white {
		background-color: #FFFFFF;
	}

	.itm-value {
		font-weight: 500;
	}

	.f-els-1 {
		line-height: 48rpx;
	}

	.recovery {
		color: #fff;
		background: #eab315;
	}

	.view-pro {
		color: #fff;
		background: #3b79fe;
	}

	.slot-content {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
	}

	.infoblocks {
		background-color: #FFFFFF;
	}

	.remark-box {
		/* width: 95%; */
		margin: 0 auto;
	}

	.remark-rule {
		margin: 0rpx 40rpx 0rpx 40rpx;
	}

	.remark-rule-title {
		color: #6f6e6e;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
	}

	.line-through {
		font-size: 32rpx;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}

	.price-area {
		color: red;
		display: flex;
	}

	.commodity-name {
		width: 93%;
		margin: 0 auto;
		color: #000000;
	}

	.work-free {
		width: 93%;
		margin: 0 auto;
		background-color: #fef9e6;
		color: #000000;
		padding: 20rpx;
	}

	.work-free .text1 {
		color: #3e3d3d;
	}

	.work-free .text2 {
		color: #7d7d7d;
	}

	.work-free .text2 span {
		color: red;
	}

	.notice-area {
		color: #7d7d7d;
		width: 93%;
		margin: 0 auto;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		float: left;
		display: inline;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.aui-flex-content {
		display: inline;
		width: 80px;
		height: 80px;
	}

	.aui-flex-title {
		font-weight: bold;
		color: #1d1b1b;
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}

	.aui-flex-time {
		font-size: 24rpx;
		color: #bcbcbc;
		padding-top: 15rpx;
	}

	.discount-price {
		line-height: 100rpx;
		font-weight: bold;
		font-size: 48rpx;
	}

	.font-thin {
		font-weight: 400;
	}

	.deliver-goods {
		margin: 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.deliver-goods .left {
		width: 480rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.deliver-goods1 {
		margin: 20rpx 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.specs-goods {
		margin: 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.specs-goods .left {
		width: auto;
	}

	.specs-goods .right {
		width: 90%;
		word-break: normal;
		display: block;
		white-space: pre-wrap;
		overflow: hidden;
	}

	.color-gray {
		color: #9f9d9e;
	}

	.width93 {
		width: 93%;
		margin: 0 auto;
	}

	.evaluation-show-title {
		margin: 10rpx 0rpx;
		display: flex;
		justify-content: space-between;
	}

	.evaluation-show-title .left {
		margin: 20rpx 0rpx;
		font-weight: bolder;
		font-size: 40rpx;
	}

	.evaluation-show-title .right {
		height: 100rpx;
		line-height: 100rpx;
		/* font-size: 30rpx; */
		color: #9f9d9e;
	}

	.goods-details-title {
		margin: 20rpx 0;
		font-weight: bolder;
		font-size: 40rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.follow-group {
		margin: 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.modal-item {
		/* margin: 40rpx 0rpx; */
		height: 100rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* color: #9f9d9e; */
		border-top: 1rpx solid #eeeded;
	}

	/* 商品列表 */
	.aui-list-box {
		overflow: hidden;
		position: relative;
	}

	.aui-list-item {
		width: 48%;
		float: left;
		margin: 0 1% 2% 1%;
		background: #fff;
		display: block;
		overflow: hidden;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.aui-list-theme-img {
		height: auto;
		width: 100%;
		position: relative;
	}

	.aui-list-theme-img img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
	}

	/* 两行或多行显示... */
	.line-ellipsis {
		width: 320rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}

	.aui-list-theme-message {
		background: #ffffff;
		padding: 10rpx 10rpx;
	}

	.aui-list-theme-title {
		color: #4a4a4a;
		font-size: 32rpx;
		line-height: 38rpx;
		margin-top: 5rpx;
	}

	.aui-list-theme-message p {
		font-size: 24rpx;
		font-weight: bold;
	}

	.aui-list-theme-message span.line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}

	.aui-list-theme-message span.none-line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
	}

	.aui-list-theme-message p i {
		font-style: normal;
		font-size: 0.7rem;
		padding: 0 0.2rem;
		color: #ff3b52;
		float: right;
		width: 25px;
		height: 25px;
	}

	.aui-list-theme-message p em {
		font-style: normal;
		font-size: 0.7rem;
		color: #ff3b52;
		text-decoration: line-through;
		font-weight: normal;
	}

	.pictrues-box {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 40rpx;
	}

	.customStyle-btn {
		width: 50rpx;
		height: 90rpx;
		border: none !important;
		background-color: transparent;
		margin-left: 0;
		margin-right: 15rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}

	.customStyle-btn::after {
		border: none;
	}

	.customStyle-btn-span {
		font-size: 20rpx;
		color: #000000;
		line-height: 45rpx;
	}

	.slot-content2 {
		font-size: 28rpx;
		text-align: left;
		width: 93%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.slot-content3 {
		font-size: 32rpx;
		/* color: #bcbcbc; */
		text-align: left;
		width: 85%;
		margin: 0 auto;
		padding-top: 80rpx;
		padding-bottom: 80rpx;
	}

	.slot-content4 {
		font-size: 32rpx;
		text-align: left;
		width: 90%;
		margin: 0 auto;
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.slot-content5 {
		font-size: 32rpx;
		text-align: left;
		width: 90%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
	}

	.have-a-try {
		width: 295rpx;
		height: 86rpx;
		border: 2rpx solid #c5c3c4;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

  .shel-a-try {
    width: 600rpx;
    height: 86rpx;
    border: 2rpx solid #c5c3c4;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    color: #b1b1b1;
    justify-content: center;
    align-items: center;
  }

	.have-a-try .price {
		line-height: 36rpx;
		color: #000000;
		font-weight: bold;
	}

	.share-link {
		width: 295rpx;
		height: 86rpx;
		border-radius: 10rpx;
		background-color: #eb5468;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.share-link .price {
		line-height: 36rpx;
		font-weight: bold;
		padding-left: 3rpx;
	}

	.red-area {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-image: linear-gradient(to right, #fc4f48, #fe6a44);
	}

	.red-area .tips {
		color: #ffffff;
		font-size: 22rpx;
	}

	.red-area .price {
		color: #ffffff;
		font-size: 50rpx;
		font-weight: bold;
		line-height: 60rpx;
	}

	.color-red {
		color: red;
	}

	.pl-3 {
		padding-left: 3rpx;
	}

	.goods-title-tag {
		color: #ffffff;
		border-radius: 6rpx;
		font-size: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
		font-weight: 350;
		padding: 3rpx 10rpx;
	}

	.middile {
		vertical-align: middle;
	}

	.success-modal-share {
		display: flex;
		justify-content: center;
		padding-top: 280rpx;
	}

	.success-modal-buy {
		background: url(https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/GroupPurchase/buybtn.png) no-repeat;
		background-size: 100% 100%;
		height: 100rpx;
		width: 300rpx;
		margin: 0 auto;
		margin-top: 140rpx;
	}

	.success-modal-content {
		background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/GroupPurchase/buybg1.png) no-repeat;
		background-size: 100% 100%;
		height: 750rpx;
		width: 650rpx;
	}

	.success-modal-provider {
		font-size: 26rpx;
		color: #e1a187;
	}

	.buy-goods-share {
		font-size: 30rpx;
		width: 250rpx;
		height: 70rpx;
		padding: 0;
		background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Share/ShareBtn.png) repeat;
		background-size: cover;
		border: none !important;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}

	.mask-solt {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.mask-close {
		display: flex;
		justify-content: center;
	}

	.u-pt-105 {
		padding-top: 210rpx;
	}

	.u-pt-175 {
		padding-top: 350rpx;
	}

	.agencySales-modal-share {
		background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/GroupPurchase/salesAgentBtn.png) no-repeat;
		background-size: 100% 100%;
		height: 100rpx;
		width: 300rpx;
		margin: 0 auto;
		margin-top: 120rpx;
	}

	.agencySales-modal-content {
		background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/GroupPurchase/salesAgentBg.png) no-repeat;
		background-size: 100% 100%;
		height: 750rpx;
		width: 650rpx;
	}

	.pb-25 {
		padding-bottom: 25rpx;
	}

	.line-height85 {
		line-height: 85rpx;
	}

	.customStyle3 {
		height: 90rpx;
		border: none !important;
		background-color: transparent;
		float: left;
		margin-right: 1rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		width: 55px !important;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}

	.customStyle3::after {
		border: none;
	}

	.customStyle3-span {
		font-size: 22rpx;
		color: #000000;
		line-height: 45rpx;
	}

	.font-baseline {
		display: flex;
		align-items: baseline;
	}

	.u-fz-70 {
		font-size: 140rpx;
	}

	.peculiarity-icon {
		color: #f4e7db;
		padding: 5rpx 20rpx;
		border-radius: 25rpx;
		background: linear-gradient(to right, #1e1a17, #4b3e36);
	}

	.peculiarity-text {
		width: 500rpx;
        height: 48rpx;
        line-height: 48rpx;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
